<template>
  <div>
    <!--  大图  -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content-banner bg-img">
          <div class="team-bg-content">
            <el-row>
              <el-col :span="12">
                <div class="grid-content-banner-img bg-purple">
                  <div class="team-bg-content-img-box">
                    <img class="team-bg-content-img" src="../assets/img/teamMark.png" alt="">
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content-banner-text bg-purple-light">
                  <div class="team-bg-content-text-box">
                    <h1>hhhh </h1>
                    <h3>{{ teamWin.team.teamName }} vs {{ teamFail.team.teamName }}</h3>
                    <br>
                    <span style="color: white">战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--  对局详情表格  -->
    <div>
      <h2 class="title">对局详情</h2>
      <br>
      <hr>
      <br>
      <div>
        <el-table
          :data="record"
          style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 92%; margin: 0 auto;">
          <el-table-column
            prop="teamRecordInfoMemberOne"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="teamRecordInfoHexoOne"
            label="英雄">
          </el-table-column>
          <el-table-column
            prop="teamRecordInfoId"
            label="id">
          </el-table-column>
          <el-table-column
            prop="teamRecordInfoHexoTwo"
            label="英雄">
          </el-table-column>
          <el-table-column
            prop="teamRecordInfoMemberTwo"
            label="姓名">
          </el-table-column>
          <el-table-column label="修改信息" v-if="flag">
            <template slot-scope="scope">
              <el-button
                round
                type="success"
                icon="el-icon-edit"
                size="mini"
                @click="handleRecordDetailUpdate(scope.$index, scope.row)">修改本条信息
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除信息" v-if="flag">
            <template slot-scope="scope">
              <el-button
                round
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleRecordDetailDel(scope.$index, scope.row)">删除本条信息
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--  添加对局详细信息  -->
        <div id="record-add" v-if="flag">
          <el-button
            round
            @click="handleRecordDetailAdd()"
            icon="el-icon-plus"
            type="warning">
            添加对局详细记录
          </el-button>
        </div>
      </div>
    </div>
    <!--  drawer  -->
    <div>
      <!--  添加对局详细信息  -->
      <el-drawer
        title="添加对局详细信息"
        :visible.sync="drawer1"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="teamRecordInfoId">
              <el-input v-model="formLabelAlign.teamRecordInfoId"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoMemberOne">
              <el-input v-model="formLabelAlign.teamRecordInfoMemberOne"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoMemberTwo">
              <el-input v-model="formLabelAlign.teamRecordInfoMemberTwo"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoHexoOne">
              <el-input v-model="formLabelAlign.teamRecordInfoHexoOne"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoHexoTwo">
              <el-input v-model="formLabelAlign.teamRecordInfoHexoTwo"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="handleAddConfirm()">确认修改</button>
      </el-drawer>
      <!--  修改对局详细信息  -->
      <el-drawer
        title="修改对局详细信息"
        :visible.sync="drawer2"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="teamRecordInfoId">
              <el-input v-model="formLabelAlign.teamRecordInfoId"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoMemberOne">
              <el-input v-model="formLabelAlign.teamRecordInfoMemberOne"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoMemberTwo">
              <el-input v-model="formLabelAlign.teamRecordInfoMemberTwo"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoHexoOne">
              <el-input v-model="formLabelAlign.teamRecordInfoHexoOne"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoHexoTwo">
              <el-input v-model="formLabelAlign.teamRecordInfoHexoTwo"></el-input>
            </el-form-item>
            <el-form-item label="teamRecordInfoParent">
              <el-input v-model="formLabelAlign.teamRecordInfoParent"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="handleUpdateConfirm()">确认修改</button>
      </el-drawer>
      <!--  添加视频    -->
      <el-drawer
        title="添加对局详细信息"
        :visible.sync="drawer3"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlignVideo">
            <!--            <el-form-item label="teamRecordInfoId">-->
            <!--              <el-input v-model="formLabelAlignVideo.videoId"></el-input>-->
            <!--            </el-form-item>-->
            <el-form-item label="videoName">
              <el-input v-model="formLabelAlignVideo.videoName"></el-input>
            </el-form-item>
            <el-form-item label="videoAddress">
              <el-input v-model="formLabelAlignVideo.videoAddress"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="handleVideoAddConfirm()">确认添加</button>
      </el-drawer>
      <!--  修改视频    -->
      <el-drawer
        title="修改对局详细信息"
        :visible.sync="drawer4"
        :with-header="true">
        <div>
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlignVideo">
            <el-form-item label="videoId">
              <el-input v-model="formLabelAlignVideo.videoId"></el-input>
            </el-form-item>
            <el-form-item label="videoName">
              <el-input v-model="formLabelAlignVideo.videoName"></el-input>
            </el-form-item>
            <el-form-item label="videoAddress">
              <el-input v-model="formLabelAlignVideo.videoAddress"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button @click="handleVideoUpdateConfirm()">确认修改</button>
      </el-drawer>
    </div>
    <!--  视频  -->
    <div>
      <h2 class="title">视频展示</h2>
      <br>
      <hr>
      <br>
      <video id="video-con" :src="videoUrl" controls></video>
      <div class="btn-box">
        <!--   增加   -->
        <el-button
          v-if="flag"
          round
          @click="handleRecordDetailVideoAdd()"
          icon="el-icon-plus"
          type="warning">
          添加视频
        </el-button>
        <!--   修改   -->
        <el-button
          v-if="flag"
          round
          @click="handleRecordDetailVideoUpdate()"
          icon="el-icon-edit"
          type="success">
          修改视频
        </el-button>
        <!--   删除   -->
        <el-button
          v-if="flag"
          round
          @click="handleRecordDetailVideoDelete()"
          icon="el-icon-delete"
          type="danger ">
          删除视频
        </el-button>
      </div>
    </div>
    <!--  评论  -->
    <div id="review-bigbox">
      <h2 class="title">评论区</h2>
      <br>
      <hr>
      <br>
      <div id="textarea-box" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="textarea"
          size="medium">
        </el-input>
        <div id="textarea-box-btn">
          <el-button @click="Comment()" slot="reference">点击发送评论</el-button>
        </div>
      </div>
      <br>
      <div style="border: 1px solid rgb(192,196,204);box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);" id="review-box">
        <div v-for="item in review">
          <div id="smal-box">
            <el-divider content-position="left">评论来自：{{ item.reviewOwner }} —— to：{{ item.reviewParent }}</el-divider>
            <span>{{ item.reviewInfo }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from "../network/request";
import Vue from "vue";
import axios from "axios";

export default {

  name: "GameRecordDetail",
  data() {
    return {
      flag: false,
      record: [],
      videoUrl: '',
      review: [],
      fight: {},
      teamWin: {},
      teamFail: {},
      textarea: '',
      labelPosition: 'right',
      formLabelAlign: {
        teamRecordInfoId: 0,
        teamRecordInfoMemberOne: "",
        teamRecordInfoMemberTwo: "",
        teamRecordInfoHexoOne: "",
        teamRecordInfoHexoTwo: "",
        teamRecordInfoParent: 0
      },
      drawer1: false,
      drawer2: false,
      drawer3: false,
      drawer4: false,
      formLabelAlignVideo: {
        videoId: 0,
        videoName: "",
        videoAddress: ""
      },
      recordVideoid: 0,
      videoInfo: {},
      videoUrlResult: '',
    }
  },
  computed: {
    RecordName() {
      return parseInt(this.$route.params.gamerecordname)
    },
  },
  methods: {
    // 判断权限
    JudgePower() {
      if (this.$store.state.userPower == 0) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    // 评论
    Comment() {
      const list = {
        reviewId: this.review.length,
        reviewUser: this.$store.state.userName,
        reviewInfo: this.textarea,
      }
      Vue.set(this.review, this.review.length, list)
      // 网络请求 传递评论到数据库

      const number = parseInt(this.$store.state.userId)
      const json = {
        reviewId: this.review.length,
        reviewOwner: number,
        reviewInfo: this.textarea,
        reviewParent: this.RecordName
      }
      axios.post('http://localhost:8081/teams/reviewmatch/save', json)
        .then(res => {
          location.reload()
        })
        .catch(Error => {

        })
    },
    // 添加对局详细信息button
    handleRecordDetailAdd() {
      this.drawer1 = true
      this.formLabelAlign.teamRecordInfoParent = this.RecordName
    },
    // 添加视频button
    handleRecordDetailVideoAdd() {
      this.drawer3 = true
      this.formLabelAlignVideo.videoId = this.RecordName
    },
    // 修改对局详细信息button
    handleRecordDetailUpdate(index, row) {
      this.drawer2 = true
      this.formLabelAlign.teamRecordInfoId = row.teamRecordInfoId
      this.formLabelAlign.teamRecordInfoMemberOne = row.teamRecordInfoMemberOne
      this.formLabelAlign.teamRecordInfoMemberTwo = row.teamRecordInfoMemberTwo
      this.formLabelAlign.teamRecordInfoHexoOne = row.teamRecordInfoHexoOne
      this.formLabelAlign.teamRecordInfoHexoTwo = row.teamRecordInfoHexoTwo
      this.formLabelAlign.teamRecordInfoParent = row.teamRecordInfoParent
    },
    // 修改视频button
    handleRecordDetailVideoUpdate(index, row) {
      this.drawer4 = true
      this.formLabelAlignVideo = this.videoInfo
    },
    // 删除对局详细信息button
    handleRecordDetailDel(index, row) {
      this.formLabelAlign.teamRecordInfoId = row.teamRecordInfoId
      this.handleDelConfirm()
    },
    // 删除视频button
    handleRecordDetailVideoDelete() {
      this.formLabelAlignVideo.videoId = this.videoInfo.videoId
      this.handleVideoDeleteConfirm()
    },
    // 确认添加对局记录
    handleAddConfirm() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/teamrecordinfo/save', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认添加视频
    handleVideoAddConfirm() {
      const json = this.formLabelAlignVideo
      axios.post('http://localhost:8081/teams/video/save', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认修改对局记录
    handleUpdateConfirm() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/teamrecordinfo/update', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认修改视频
    handleVideoUpdateConfirm() {
      const json = this.formLabelAlignVideo
      axios.post('http://localhost:8081/teams/video/update', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认删除对局记录
    handleDelConfirm() {
      const arr = [
        this.formLabelAlign.teamRecordInfoId
      ]
      axios.post('http://localhost:8081/teams/teamrecordinfo/delete', arr)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认删除视频
    handleVideoDeleteConfirm() {
      const arr = [
        this.formLabelAlignVideo.videoId
      ]
      axios.post('http://localhost:8081/teams/video/delete', arr)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    }
  },
  created() {
    this.JudgePower()
    // 对战双方信息
    request({
      url: 'record/info/' + this.RecordName,
    }).then(res => {
      this.fight = res
      console.log(res);
      // 播放视频
      request({
        url: '/video/info/' + this.fight.record.recordVideoid,
      }).then(res => {
        console.log('---');
        console.log(res);
        this.videoInfo = res.video
        this.videoUrl = res.video.videoAddress
      }).catch(err => {
        console.log(err)
      })

      // 请求两支队伍
      // 获胜队伍
      request({
        url: 'team/info/' + this.fight.record.recordWin
      }).then(res => {
        this.teamWin = res
      }).catch(err => {
        console.log(err)
      })
      // 失败队伍
      request({
        url: 'team/info/' + this.fight.record.recordFail
      }).then(res => {
        this.teamFail = res
      }).catch(err => {
        console.log(err)
      })
    }).catch(err => {
      console.log(err)
    })

    // 对局详情表格
    request({
      url: 'teamrecordinfo/listInfo/' + this.RecordName,
    }).then(res => {
      this.record = res.list
    }).catch(err => {
      console.log(err)
    })
    // 评论获取
    request({
      url: "/reviewmatch/list",
    }).then(res => {
      this.review = res.page.list
    }).catch(err => {
      console.log(err)
    })
    // 获取本地比赛记录list
    // 视频相关
    request({
      url: '/record/info/' + this.RecordName,
    }).then(res => {
      this.recordVideoid = res.record.recordVideoid
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style lang="scss" scoped>
#GameRecord-box {
  width: 94%;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}


.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.grid-content-banner-img {
  width: 100%;
  height: 521px;
  margin: 0 auto;
}

.team-bg-content-img-box {
  width: 70%;
  height: 70%;
  padding: 12%;
  margin: 0 auto;
}

.team-bg-content-img {
  width: 100%;
  height: 100%;
}

.grid-content-banner-text {
}

.bg-img {
  background-image: url("../assets/img/team_banner-bg.jpg");
}

.team-bg-content {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  color: white;
}

.team-bg-content-text-box {
  width: 80%;
  height: 70%;
  margin: 22% auto;
}

span {
  color: black;
}

.bg-purple {
  background-color: #d3dce6;
}

.bg-purple-light {
  //border: 1px solid #d3dce6;
}

.bg-purple-dark {
  background: #99a9bf;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

#video-con {
  width: 90%;
  margin: 0 auto;
  display: block;
}

.title {
  margin-top: 3%;
  margin-left: 2%;
}

#review-bigbox {
  margin-bottom: 5%;
}

#textarea-box {
  width: 80%;
  margin: 0 auto;
}

#textarea-box-btn {
  float: right;
  margin-top: 1%;
}

#smal-box {
  width: 90%;
  margin: 3% auto;
}

#review-box {
  width: 80%;
  margin: 0 auto;
  margin-top: 3%;
}

#record-add {
  float: right;
  margin-top: 1%;
  margin-right: 4%;
}

.btn-box {
  float: right;
  margin-right: 5%;
}

.el-input {
  width: 60%;
  margin-left: 20%;
}

.el-input {
  width: 60%;
  margin-left: 20%;
}
</style>
